<template>
    <div id="Canvas"></div>
</template>

<script setup>
import { onMounted, onUnmounted, onBeforeUnmount } from 'vue'
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import * as THREE from 'three'
let material
onMounted(() => {
    initClient()
})
const initClient = () => {
    let Can = document.getElementById('Canvas')
    let scene, camera, renderer
    scene = new THREE.Scene()
    scene.background = new THREE.Color(0xffffff)

    //创建一个空的几何体对象
    // let geometry = new THREE.BufferGeometry();
    // 点坐标
    // const vertices = new Float32Array([
    // 0, 0, 0, //顶点1坐标
    // 80, 0, 0, //顶点2坐标
    // 80, 80, 0, //顶点3坐标

    // 0, 0, 0, //顶点4坐标   和顶点1位置相同
    // 80, 80, 0, //顶点5坐标  和顶点3位置相同
    // 0, 80, 0, //顶点6坐标
    // ])
    //     const indexes = new Uint16Array([
    //     // 下面索引值对应顶点位置数据中的顶点坐标
    //     0, 1, 2, 0, 2, 3,
    // ])
    // const attribue = new THREE.BufferAttribute(vertices, 3)
    // geometry.attributes.position = attribue
    // geometry.indx = new THREE.BufferAttribute(indexes, 1) 
    // //点材料
    // const material = new THREE.PointsMaterial({
    //     color: 0x8A2BE2,
    //     size: 50,
    // })
    // const points = new THREE.Points(geometry, material)
    // scene.add(points)   


    //线材料
    // material = new THREE.LineBasicMaterial({
    //     color: 0x009ACD,
    // })
    // const line = new THREE.Line(geometry, material)
    // scene.add(line)

    //面材料
    // material = new THREE.MeshBasicMaterial({
    //     color: 0x9F79EE,
    // })

    // const mesh = new THREE.Mesh(geometry, material)
    // scene.add(mesh)


    // const geometry = new THREE.SphereGeometry(100, 8, 8)
    // console.log('几何体', geometry);
    // console.log('顶点位置数据', geometry.attributes.position);
    // console.log('顶点索引数据', geometry.index);
    // material = new THREE.MeshBasicMaterial({
    //     color: 0x9F79EE,
    //     wireframe: true
    // })
    // const mesh = new THREE.Mesh(geometry, material)
    // scene.add(mesh)

    let geometry = new THREE.BufferGeometry()
    let geometry1 = new THREE.BufferGeometry()
    let geometry2 = new THREE.BufferGeometry()
    let geometry3 = new THREE.BufferGeometry()

    let r = 200
    const N = 100
    let sp = 2 * Math.PI / N
    let arr = []
    for (let i = 0; i < N; i++) {
        const angle = sp * i
        const x = r * Math.cos(angle)
        const y = r * Math.sin(angle)
        arr.push(x, y, 0)
    }

    let vertices = new Float32Array(arr)
    let attribue = new THREE.BufferAttribute(vertices, 3)
    geometry.attributes.position = attribue
    material = new THREE.LineBasicMaterial({
        color: 0x9F79EE,
    })

    let line = new THREE.Line(geometry, material)
    scene.add(line)

    let r1 = 50
    let sp1 = 1 * Math.PI / N
    let cx1 = -75
    let cy1 = 50
    let arr1 = []
    for (let i = 0; i < N + 1; i++) {
        const angle = sp1 * i
        const x = cx1 + r1 * Math.cos(angle)
        const y = cy1 + r1 * Math.sin(angle)
        arr1.push(x, y, 0)
    }
    let vertices1 = new Float32Array(arr1)
    let attribue1 = new THREE.BufferAttribute(vertices1, 3)
    geometry1.attributes.position = attribue1
    let material1 = new THREE.LineBasicMaterial({
        color: 0x9F79EE,
    })

    let line1 = new THREE.Line(geometry1, material1)
    scene.add(line1)


    let cx2 = 75
    let arr2 = []
    for (let i = 0; i < N; i++) {
        const angle = sp1 * i
        const x = cx2 + r1 * Math.cos(angle)
        const y = cy1 + r1 * Math.sin(angle)
        arr2.push(x, y, 0)
    }
    let vertices2 = new Float32Array(arr2)
    let attribue2 = new THREE.BufferAttribute(vertices2, 3)
    geometry2.attributes.position = attribue2
    let material2 = new THREE.LineBasicMaterial({
        color: 0x9F79EE,
    })

    let line2 = new THREE.Line(geometry2, material2)
    scene.add(line2)

    let r3 = 100
    let sp3 = 3 * Math.PI / (N * 4)
    let cx3 = 0
    let cy3 = 50

    let arr3 = []
    for (let i = 0; i < N; i++) {
        const angle = sp3 * i
        const x = cx3 + r3 * Math.cos(angle)
        const y = cy3 + r3 * Math.sin(angle)
        arr3.push(x, y, 0)
    }
    let vertices3 = new Float32Array(arr3)
    let attribue3 = new THREE.BufferAttribute(vertices3, 3)
    geometry3.attributes.position = attribue3
    let material3 = new THREE.LineBasicMaterial({
        color: 0x9F79EE,
    })
    geometry3.rotateZ(Math.PI);
    let line3 = new THREE.Line(geometry3, material3)
    scene.add(line3)










    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000)
    camera.position.set(0, 100, 300)
    camera.lookAt(0, 0, 0)
    renderer = new THREE.WebGLRenderer()
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 轨道控件
    const controls = new OrbitControls(camera, renderer.domElement)
    controls.addEventListener('change', function () {
        renderer.render(scene, camera)
    })
    const axesHelper = new THREE.AxesHelper(300)
    // scene.add(axesHelper)
    renderer.render(scene, camera)
    Can.appendChild(renderer.domElement)
}
</script>

<style></style>